<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Function library example</title>
  <style>
    input {
      font-size: 2em;
      margin: 10px 1px 0;
    }
  </style>
</head>
<body>

  <input class="numberInput" type="text">
  <p></p>

  <script>
    const input = document.querySelector('.numberInput');
    const para = document.querySelector('p');

    input.onchange = function() {
      const num = input.value;
      if (isNaN(num)) {
        para.textContent = 'you should enter a number';
      }
      else {
        para.textContent = num + 'squared is ' + squared(num) +' .' +
                           num + 'cubed is ' + subed(num) + ' .' +
                           num + 'factorial is ' + factorial(num) + ' .' +
                           num + 'sqrt is ' + qurt(num) + '.'
      }
    }

    function squared(num) {
      return num * num;
    }
    function subed(num) {
      return num * num * num;
    }
    function factorial(num) {
      if (num < 0) {
        return undefined;
      }
      else if (num === 0) {
        return 1;
      }
      let x = num - 1;
      while (x > 1) {
        num *= x
        x--;
      }
      return num;
    }

    function qurt(num) {
      return Math.sqrt(num)
    }
  </script>
</body>
</html>